// 时间
var dateArray = JSON.parse(sessionStorage.getItem("xAxisArray"))
// 商品评论人数 1
var spArray = JSON.parse(sessionStorage.getItem("spArray"))
// 课程评论人数 2
var kcArray = JSON.parse(sessionStorage.getItem("kcArray"))
// 微圈评论人数 3
var wqArray = JSON.parse(sessionStorage.getItem("wqArray"))
// 商品评论人数 1
var spNum = 0;
// 课程评论人数 2
var kcNum = 0;
// 微圈评论人数 3
var wqNum = 0;

$.each(spArray,function (i,val){
    spNum += val;
})
$.each(kcArray,function (i,val){
    kcNum += val;
})
$.each(wqArray,function (i,val){
    wqNum += val;
})

//第一个统计模块
var dom = document.getElementById('wire');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};
var option;
option = {
    title: {
        text: 'Weekly Info'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['商品评论人数', '课程评论人数', '微圈评论人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dateArray
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '商品评论人数',
            type: 'line',
            stack: 'Total',
            data: spArray
        },
        {
            name: '课程评论人数',
            type: 'line',
            stack: 'Total',
            data: kcArray
        },
        {
            name: '微圈评论人数',
            type: 'line',
            stack: 'Total',
            data: wqArray
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);

//第二个统计模块
var chartDom2 = document.getElementById('cake');
var myChart2 = echarts.init(chartDom2);
// var myChart2 = echarts.init(chartDom2, 'dark');
var option2;

option2 = {
    title: {
        text: 'Weekly Info',
        subtext: 'Cookie Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'Week用户统计',
            type: 'pie',
            radius: '50%',
            data: [
                { value: spNum , name: '商品评论人数' },
                { value: kcNum , name: '课程评论人数' },
                { value: wqNum , name: '微圈评论人数' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
option2 && myChart2.setOption(option2);

//第三个统计模块
var chartDom3 = document.getElementById('column');
var myChart3 = echarts.init(chartDom3);
var option3;

option3 = {
    xAxis: {
        data: ['商品评论人数', '课程评论人数', '微圈评论人数']
    },
    yAxis: {},
    dataGroupId: '',
    animationDurationUpdate: 500,
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: {
        type: 'bar',
        id: 'sales',
        data: [
            {
                value: spNum,
                groupId: '商品评论人数',
                itemStyle: {
                    color: '#00C9A7'
                }
            },
            {
                value: kcNum,
                groupId: '课程评论人数',
            },
            {
                value: wqNum,
                groupId: '微圈评论人数',
                itemStyle: {
                    color: '#a90000'
                }
            }
        ],
        universalTransition: {
            enabled: true,
            divideShape: 'clone'
        }
    }
};

const drilldownData = [
    {
        dataGroupId: '商品评论人数',
        data: [
            [dateArray[0],{value: spArray[0], itemStyle: {color: '#00C9A7'}}],
            [dateArray[1],{value: spArray[1], itemStyle: {color: '#00C9A7'}}],
            [dateArray[2],{value: spArray[2], itemStyle: {color: '#00C9A7'}}],
            [dateArray[3],{value: spArray[3], itemStyle: {color: '#00C9A7'}}],
            [dateArray[4],{value: spArray[4], itemStyle: {color: '#00C9A7'}}],
            [dateArray[5],{value: spArray[5], itemStyle: {color: '#00C9A7'}}],
            [dateArray[6],{value: spArray[6], itemStyle: {color: '#00C9A7'}}],
           ]
    },
    {
        dataGroupId: '课程评论人数',
        data: [
            [dateArray[0],kcArray[0]],
            [dateArray[1],kcArray[1]],
            [dateArray[2],kcArray[2]],
            [dateArray[3],kcArray[3]],
            [dateArray[4],kcArray[4]],
            [dateArray[5],kcArray[5]],
            [dateArray[6],kcArray[6]]
        ]
    },
    {
        dataGroupId: '微圈评论人数',
        data: [
            [dateArray[0],{value: wqArray[0], itemStyle: {color: '#a90000'}}],
            [dateArray[1],{value: wqArray[1], itemStyle: {color: '#a90000'}}],
            [dateArray[2],{value: wqArray[2], itemStyle: {color: '#a90000'}}],
            [dateArray[3],{value: wqArray[3], itemStyle: {color: '#a90000'}}],
            [dateArray[4],{value: wqArray[4], itemStyle: {color: '#a90000'}}],
            [dateArray[5],{value: wqArray[5], itemStyle: {color: '#a90000'}}],
            [dateArray[6],{value: wqArray[6], itemStyle: {color: '#a90000'}}],
        ]
    }
];

myChart3.on('click', function (event) {
    if (event.data) {
        var subData = drilldownData.find(function (data) {
            return data.dataGroupId === event.data.groupId;
        });
        if (!subData) {
            return;
        }
        myChart3.setOption({
            xAxis: {
                data: subData.data.map(function (item) {
                    return item[0];
                })
            },
            series: {
                type: 'bar',
                id: 'sales',
                dataGroupId: subData.dataGroupId,
                data: subData.data.map(function (item) {
                    return item[1];
                }),
                universalTransition: {
                    enabled: true,
                    divideShape: 'clone'
                }
            },
            graphic: [
                {
                    type: 'text',
                    left: 50,
                    top: 20,
                    style: {
                        text: '返回',
                        fontSize: 18
                    },
                    onclick: function () {
                        myChart3.setOption(option3);
                    }
                }
            ]
        });
    }
});
option3 && myChart3.setOption(option3);


//进行切换模块
var wire = $("#wire")
var cake = $("#cake")
var column =$("#column")
cake.hide();
column.hide();
function changState(state){
    if (state == 0){
        wire.hide()
        column.hide()
        cake.show()
        $(window).trigger('resize');
    }else if (state == 1){
        cake.hide()
        column.hide()
        wire.show()
        $(window).trigger('resize');
    }else if (state == 2){
        cake.hide()
        wire.hide()
        column.show()
        $(window).trigger('resize');
    }
}
